import React, { Component } from 'react';
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
import { px2dp } from 'bee/utils';
import { sizes, colors } from 'bee/themes';
import noop from 'bee/utils/noop';
import { Icon, Names } from 'bee/components/Icon';
import { Languages } from 'bee/constants/Languages';

// @flow
type Props = {
  text: string,
  onPress: Function,
  iconName: string,
  iconColor: string,
};

export default class ChooseBtn extends Component<Props> {
  static defaultProps = {
    text: Languages.pleseChoose,
    iconName: Names.gengduofuben,
    onPress: noop,
    iconColor: colors[1103],
  };

  render() {
    const { text, iconName, iconColor } = this.props;
    return (
      <TouchableOpacity style={styles.row} onPress={this.props.onPress}>
        <Text style={[styles.chooseText, { marginRight: px2dp(20) }]}>
          {text || Languages.pleseChoose}
        </Text>
        <Icon color={iconColor} name={iconName} size={sizes.f2} />
        {/* <Icon size={px2dp(36)} /> */}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  chooseText: {
    fontSize: sizes.f1,
    color: colors[1103],
  },
});
